<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
<!--
1.img标签中的img就是英文image的缩写
所以img标签的作用,就是告诉浏览器我们需要显示一张图片

2.img标签格式:<img src="">
img标签中的src就是英文source的缩写
所以img标签中的src就是用来告诉img标签,需要显示的图片名称

3.注意点
- 和H系列的标签/p标签海域Hr标签不一样,img标签不会独占一行
- 如果我们手动指定了img标签显示的图片的宽度和高度,有可能会导致图片变形,那么如果有想指定宽度和高度,又不想让图片变形,我们可以指定宽度和高度其中的一个值即可
- 只要指定了一个高度,系统会自动根据高度计算出宽度,只要指定了宽度,系统会自动根据宽度计算出高度,并且都是等比拉伸的,也就是说不会变形
4.
width:宽度
height:高度
所以在img标签中width/height这两个属性的作用,就是用来告诉img标签将来需要显示的图片有多宽有多高
如果img标签没有指定需要显示的图片的宽高,那么系统会按照图片默认的宽高来显示
如果img标签指定的宽高,那么系统会按照指定的宽高来显示

title:用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容

alt其实是英文alternate的缩写,他的作用就是用于告诉浏览器,当需要显示的图片找不到事显示什么内容
-->

<img src="示例图片.jpg">

<img src="示例图片.jpg" width="300" height="450">

<img src="示例图片.jpg" width="100" height="450">

<img src="示例图片.jpg" width="300">

<img src="示例图片.jpg" height="150">

<img src="示例图片.jpg" height="150" title="这是一张示例图片">

<img src="示例图片1.jpg" height="150" alt="这张图片找不到了">



</body>
</html>